<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>更改密码</title>
  <link rel="stylesheet" href="static/css/bootstrap.css">
  <link rel="stylesheet" href="static/css/bootoast.css">
  <script src="static/js/jquery-3.6.0.min.js"></script>
  <script src="static/js/bootstrap.js"></script>
  <script src="js/bootoast.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      position: relative;
      font-size: 5px;
    }

    .my-container {
      width: 98%;
      margin: 0px auto;
    }
    /* 表单宽度设置 */
    .Form {
      width: 30%;
    }

  </style>
</head>

<body>
<div class="contsiner-fluid my-container">
  <ol class="breadcrumb" style="margin-top:5px; background-color: #bcc5c1;">
    <li><a href="#" style="font-size: 20px;">个人中心</a></li>
    <li class="active" style="font-size: 20px;">修改密码</li>
  </ol>
  <form class="Form" action="/welcome/student" method="post">
    <div class="form-group">
      <label for="oldPassword">旧密码：</label>
      <input type="text" class="form-control" id="oldPassword" name="oldPassword" placeholder="请输入旧密码">
    </div>
    <div class="form-group">
      <label for="newPassword">新密码：</label>
      <input type="text" class="form-control" id="newPassword" name="newPassword" placeholder="请输入新密码">
    </div>
    <div class="form-group">
      <label for="rePassword">确认密码：</label>
      <input type="text" class="form-control" id="rePassword" name="rePassword" placeholder="请确认新密码">
    </div>
    <button type="button" class="btn btn-primary" onclick="save()">修改</button>
  </form>
</div>
<script>
  // 提交表单的方法
  function save() {
    // 非空校验
    var oldPassword = $("#oldPassword").val();
    var newPassword = $("#newPassword").val();
    var rePassword = $("#rePassword").val();
    let userId=sessionStorage.getItem("userId");
    // 进行非空校验
    if (!oldPassword|| oldPassword === '') {
      bootoast({
        message: '旧密码不能为空',
        type: 'danger',
        position:'top',
        timeout:2
      });
      return false;
    }
    if (!newPassword|| newPassword === '') {
      bootoast({
        message: '新密码不能为空',
        type: 'danger',
        position:'top',
        timeout:2
      });
      return false;
    }
    if (newPassword === oldPassword) {
      bootoast({
        message: '新密码不能和旧密码相同',
        type: 'danger',
        position:'top',
        timeout:2
      });
      return false;
    }
    if (rePassword!=newPassword) {
      bootoast({
        message: '两次密码输入不一致',
        type: 'danger',
        position:'top',
        timeout:2
      });
      return false;
    }
    console.log(`userId=${userId}&oldPassword=${oldPassword}&newPassword=${newPassword}`)
    // 提交表单
    $.ajax({
      type: 'post',// 提交方式 post
      url: '/welcome/student?operate=modify',//
      cache: false,// 不启用缓存
      data: `oldPassword=${oldPassword}&newPassword=${newPassword}&userId=${userId}`,
      dataType: 'json',// 期望服务器响应的数据类型 json
      success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
        console.log(result);
        //clearData();
        // 提示
        bootoast({
          message: result.msg,
          type: 'success',
          position:'top',
          timeout:2
        });
        if(result.code == 1){
          // 密码修改成功，跳转登录，重新进入
          sessionStorage.clear();
          window.top.location.href = "login.html";// 这个是跳出frame
        }

      },
      error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
        // 提示
        bootoast({
          message: "服务器请求错误！",
          type: 'danger',
          position:'top',
          timeout:2
        });
      }

    })
    return true;
  }

  /**
   * 清空数据
   */
  function clearData(){
    $("#myForm").empty();
  }
</script>
</body>

</html>